<template>
  <div class="main-box">
    <div class="info-form-box">
      <div class="head-box">员工请假申请</div>
      <div class="emp-info-title">姓名</div>
      <div class="name">刘占炎</div>
      <!-- <input
        class="emp-info-input"
        type="text"
        placeholder="请输入员工信息"
        v-model="empInfo"
      /> -->
      <div class="emp-info">请假类型</div>
      <el-select v-model="value" placeholder="请选请假类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <div class="emp-info">项目阶段</div>
      <div class="tag-box">
        <el-tag type="info">售前调研</el-tag>
        <el-tag type="success">电气实施</el-tag>
        <el-tag type="info">产品设计</el-tag>
        <el-tag type="info">研发</el-tag>
        <el-tag type="info">联调</el-tag>
        <el-tag type="info">等待验收</el-tag>
        <el-tag type="info">已验收</el-tag>
      </div> -->
      <div class="emp-info">请假开始时间</div>
      <!-- <input class="finish-input" type="textarea" /> -->
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="请选择开始日期"
      >
      </el-date-picker>
      <div class="emp-info">请假结束时间</div>
      <!-- <input class="finish-input" type="textarea" /> -->
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="请选择结束日期"
      >
      </el-date-picker>
      <div class="emp-info">请假备注</div>
      <input class="finish-input" type="textarea" />
      <!-- <div class="emp-info">寻求支持</div>
      <input class="finish-input" type="textarea" /> -->
      <div class="sub-btn">
        <div class="sub">提交</div>
        <div class="remove">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      empInfo: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.main-box {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: #f3f6ff;

  .info-form-box {
    margin-top: 100px;
    margin-bottom: 100px;
    border: 1px solid rgb(240, 247, 247);
    border-radius: 20px;
    width: 80%;
    height: 100%;
    background: #fff;

    .head-box {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
      /* border: 1px solid blue; */
    }

    .emp-info-title {
      /* border: 1px solid blue; */
      height: 30px;
      line-height: 30px;
      padding-left: 80px;
      margin-top: 10px;
    }

    .name {
      height: 30px;
      line-height: 30px;
      padding-left: 80px;
    }

    .emp-info-input {
      height: 20px;
      margin-left: 80px;
      width: 70%;
    }
    > .emp-info-input:focus {
      outline: 1px solid rgb(29, 153, 236);
    }

    .emp-info {
      /* border: 1px solid blue; */
      margin-top: 10px;
      height: 30px;
      line-height: 30px;
      padding-left: 80px;
    }

    .el-select {
      height: 30px;
      margin-left: 80px;
      width: 70%;
    }

    .tag-box {
      /* border: 1px solid red; */
      height: 60px;
      line-height: 30px;
      padding-left: 80px;
    }

    .finish-input {
      height: 40px;
      margin-left: 80px;
      width: 70%;
    }

    .sub-btn {
      /* border: 1px solid red; */
      display: flex;
      width: 100%;
      justify-content: center;

      > div {
        /* border: 1px solid green; */
        width: 20%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 20px;
        margin: 20px;
      }

      .sub {
        background: #378ac2;
        color: #fff;
      }

      .remove {
        background: #bfc2c2;
        color: #fff;
      }
    }
  }
}

.el-tag {
  width: 21%;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.el-date-editor {
  width: 805px;
  margin-left: 80px;
}

.empty {
  /* border: 1px solid red; */
  height: 800px;
  width: 900px;
}
</style>